<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>constrain</title>
</head>
<body>
<div id="constrainContainer"
     style="width: 300px;height: 300px;border: 1px solid red;position: relative;">

    <div style="width: 100px;height: 100px;
    -ms-touch-action:none
            -ms-user-select:none;
    border: 1px solid green;
    position: absolute;left:10px;top:10px;"
         id="d">

    </div>

</div>
<button id="cd">contrain to div</button>
<button id="cw">constrain to window</button>
<button id="cn">no constrain</button>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use("dd,node", function (S, DD, Node) {
        var $ = Node.all;
        var drag = new DD.Draggable({
            node:"#d",
            groups:false,
            move:1
        });
        var c = new DD.Constrain({
            constrain:"#constrainContainer"
        });

        drag.plug(c);

        $("#cd").on("click", function () {
            $("#d").css({
                left:"10px",
                top:"10px"
            });
            c.set("constrain", "#constrainContainer");
            drag.plug(c);
        });

        $("#cw").on("click", function () {
            $("#d").css({
                left:"10px",
                top:"10px"
            });
            c.set("constrain", true);
            drag.plug(c);
        });

        $("#cn").on("click", function () {
            $("#d").css({
                left:"10px",
                top:"10px"
            });

            drag.unplug(c);
        });
    });
</script>
</body>
</html>